<template>
  <el-drawer
    :model-value="visible"
    :title="drawerTitle"
    size="60%"
    @close="handleClose"
  >
    <div class="coupon-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="优惠券ID">{{ detailData.id }}</el-descriptions-item>
        <el-descriptions-item label="优惠券名称">{{ detailData.name }}</el-descriptions-item>
        <el-descriptions-item label="优惠券类型">{{ getCouponType(detailData.type) }}</el-descriptions-item>
        <el-descriptions-item label="面额">{{ detailData.amount }}元</el-descriptions-item>
        <el-descriptions-item label="使用条件">满{{ detailData.condition }}元可用</el-descriptions-item>
        <el-descriptions-item label="发放数量">{{ detailData.quantity }}张</el-descriptions-item>
        <el-descriptions-item label="每人限领">{{ detailData.limit }}张</el-descriptions-item>
        <el-descriptions-item label="已领取">{{ detailData.received }}张</el-descriptions-item>
        <el-descriptions-item label="已使用">{{ detailData.used }}张</el-descriptions-item>
        <el-descriptions-item label="有效期">
          {{ formatDate(detailData.startTime) }} 至 {{ formatDate(detailData.endTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(detailData.status)">
            {{ getStatusText(detailData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(detailData.createTime) }}</el-descriptions-item>
      </el-descriptions>
      
      <el-tabs v-model="activeTab" class="detail-tabs">
        <el-tab-pane label="数据统计" name="statistics">
          <div class="chart-container">
            <el-row :gutter="20">
              <el-col :span="12">
                <type-pie 
                  :chart-data="typePieData" 
                  title="领取渠道分布" 
                  style="height: 400px"
                />
              </el-col>
              <el-col :span="12">
                <trend-chart 
                  :chart-data="trendData" 
                  chart-type="sales" 
                  style="height: 400px"
                />
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="领取详情" name="receive">
          <shop-list 
            :shop-data="shopData"
            :total="shopTotal"
            :current-page="shopCurrentPage"
            :page-size="shopPageSize"
            @size-change="handleShopSizeChange"
            @current-change="handleShopCurrentChange"
          />
        </el-tab-pane>
        
        <el-tab-pane label="核销详情" name="writeOff">
          <shop-list 
            :shop-data="writeOffData"
            :total="writeOffTotal"
            :current-page="writeOffCurrentPage"
            :page-size="writeOffPageSize"
            @size-change="handleWriteOffSizeChange"
            @current-change="handleWriteOffCurrentChange"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, computed, defineEmits, defineProps, watch } from 'vue'
import TypePie from './component/typePie.vue'
import TrendChart from './component/trendChart.vue'
import ShopList from './component/shopList.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const drawerTitle = computed(() => `优惠券详情 - ${props.data.name || ''}`)

const activeTab = ref('statistics')

// 详情数据
const detailData = ref({})

// 图表数据
const typePieData = ref({
  names: ['小程序', 'APP', 'H5', '线下'],
  data: [
    { value: 335, name: '小程序' },
    { value: 310, name: 'APP' },
    { value: 234, name: 'H5' },
    { value: 135, name: '线下' }
  ]
})

const trendData = ref({
  times: ['1月', '2月', '3月', '4月', '5月', '6月'],
  salesData: [120, 132, 101, 134, 90, 230]
})

// 店铺数据
const shopData = ref([])
const shopTotal = ref(0)
const shopCurrentPage = ref(1)
const shopPageSize = ref(10)

const writeOffData = ref([])
const writeOffTotal = ref(0)
const writeOffCurrentPage = ref(1)
const writeOffPageSize = ref(10)

// 监听data变化
watch(() => props.data, (newVal) => {
  if (newVal && Object.keys(newVal).length > 0) {
    detailData.value = { ...newVal }
    // 模拟获取店铺数据
    mockShopData()
  }
}, { immediate: true })

const handleClose = () => {
  visible.value = false
}

const getCouponType = (type) => {
  const types = {
    '1': '满减券',
    '2': '折扣券'
  }
  return types[type] || '未知类型'
}

const getStatusText = (status) => {
  const statuses = {
    0: '待审核',
    1: '审核中',
    2: '审核通过',
    3: '审核拒绝'
  }
  return statuses[status] || '未知状态'
}

const getStatusType = (status) => {
  const types = {
    0: '',
    1: 'info',
    2: 'success',
    3: 'danger'
  }
  return types[status] || ''
}

const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

// 模拟店铺数据
const mockShopData = () => {
  shopData.value = Array.from({ length: 10 }, (_, i) => ({
    id: i + 1,
    shopName: `店铺${i + 1}`,
    shopCode: `SHOP${String(i + 1).padStart(3, '0')}`,
    products: Math.floor(Math.random() * 100),
    persons: Math.floor(Math.random() * 500),
    orders: Math.floor(Math.random() * 200),
    customers: Math.floor(Math.random() * 300),
    price: (Math.random() * 100).toFixed(2),
    total: (Math.random() * 10000).toFixed(2)
  }))
  shopTotal.value = 100
  
  writeOffData.value = Array.from({ length: 10 }, (_, i) => ({
    id: i + 1,
    shopName: `店铺${i + 1}`,
    shopCode: `SHOP${String(i + 1).padStart(3, '0')}`,
    products: Math.floor(Math.random() * 100),
    persons: Math.floor(Math.random() * 500),
    orders: Math.floor(Math.random() * 200),
    customers: Math.floor(Math.random() * 300),
    price: (Math.random() * 100).toFixed(2),
    total: (Math.random() * 10000).toFixed(2)
  }))
  writeOffTotal.value = 80
}

const handleShopSizeChange = (val) => {
  shopPageSize.value = val
  // 模拟重新获取数据
}

const handleShopCurrentChange = (val) => {
  shopCurrentPage.value = val
  // 模拟重新获取数据
}

const handleWriteOffSizeChange = (val) => {
  writeOffPageSize.value = val
  // 模拟重新获取数据
}

const handleWriteOffCurrentChange = (val) => {
  writeOffCurrentPage.value = val
  // 模拟重新获取数据
}
</script>

<style scoped>
.coupon-detail {
  padding: 20px;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.detail-tabs {
  margin-top: 20px;
}

.chart-container {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}
</style>